<template>
  <div>
    <TopNav />
    <div class="hostDetail">
        <div class="detailTop">
          <div class="topLeft">
            <img :src="data.pic" alt="">
          </div>
          <div class="topRight">
            <div style="border-bottom:1px solid gray;width:530px;text-align:left;padding:10px">
              <span style="font-size:25px;font-weight:700;margin-right:20px">{{data.name}}</span><span>服务价格:{{data.price}}</span>
            </div>
            <div>
              <p style="text-align:left;margin:20px 0"><span style="margin-right:20px">年龄:</span><span>{{data.age}}</span></p>
              <p style="text-align:left;margin:20px 0"><span style="margin-right:20px">身高:</span><span>{{data.height}}</span></p>
              <p style="text-align:left;margin:20px 0"><span style="margin-right:20px">体重:</span><span>{{data.weight}}</span></p>
              <p style="text-align:left;margin:20px 0"><span style="margin-right:20px">电话:</span><span style="color:red">登录后显示</span></p>
              <p style="text-align:left;margin:20px 0"><span style="margin-right:20px">备注:</span><span>{{data.remark}}</span></p>

              <button @click="toLogin">登录后下单</button>
              <button>查看档期</button>

            </div>
          </div>
        </div>
        <div class="video">
          <div class="title">
            <p class="title_left"></p>
            <p class="title_right">视频样片</p>
          </div>
          <div class="movie" style="display:flex;flex-wrap:wrap">
            <div style="height:159px;width:283px;margin: 21px 0;margin-right:18px;background:#faf4e8;border: 1px solid rgba(242, 218, 180, 1);">
              <a href="http://" target="_blank" rel="noopener noreferrer" >
              <img :src="null"  alt="" style="font-size:18px;color: #C28F47;width:283px;height:159px"></a>
            </div>
            <div style="height:159px;width:283px;margin: 21px 0;margin-right:18px;background:#faf4e8;border: 1px solid rgba(242, 218, 180, 1);">
              <a href="http://" target="_blank" rel="noopener noreferrer" >
              <img :src="null"  alt="" style="font-size:18px;color: #C28F47;width:283px;height:159px"></a>
            </div>
            <div style="height:159px;width:283px;margin: 21px 0;margin-right:18px;background:#faf4e8;border: 1px solid rgba(242, 218, 180, 1);">
              <a href="http://" target="_blank" rel="noopener noreferrer" >
              <img :src="null"  alt="" style="font-size:18px;color: #C28F47;width:283px;height:159px"></a>
            </div>
            <div style="width: 281px;height: 35px;border: 1px solid rgba(242, 218, 180, 1);float: left;margin-right: 18px;line-height: 35px;background: #faf4e8;"></div>
            <div style="width: 281px;height: 35px;border: 1px solid rgba(242, 218, 180, 1);float: left;margin-right: 18px;line-height: 35px;background: #faf4e8;"></div>
            <div style="width: 281px;height: 35px;border: 1px solid rgba(242, 218, 180, 1);float: left;margin-right: 18px;line-height: 35px;background: #faf4e8;"></div>
          </div>

<!-- 个人介绍 -->
            <div class="brief">
              <div class="title">
                <p class="title_left"></p>
                <p class="title_right">个人简介</p>
              </div>
              <div class="brief_info">
                <div>
                  <div v-if="data.information">
                    <p>基本资料:</p>
                    <p>{{data.information}}</p>
                  </div>
                  <br>
                  <div v-if="data.style">
                    <p>主持风格:</p>
                    <p>{{data.style}}</p>
                  </div>
                  <br>
                  <div v-if="data.experience">
                    <p>个人经历:</p>
                    <p>{{data.experience}}</p>
                  </div> 
                  <div v-if="data.img">
                    <div v-for="(item,index) in data.img" :key='index'>
                      <img :src='item' alt="">
                    </div>  
                  </div>
                                  
                </div>
              </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import TopNav from "../components/TopNav/TopNav";
import EventBus from '../utils/eventbus'

export default {
  name: "Style",
  data(){
    return {
      data:''
    }
  },
  components: {
      TopNav
  },
  props:{

  },
  methods:{

    toLogin(){
      this.$router.push("login")
    }
  },
  mounted(){
    console.log(this.$route.params);
    this.data=this.$route.params;
    //  EventBus.$on('listDetail',(data)=>{
    //     this.data=data;
    //     console.log(this.data);
    //   })
  }
};
</script>

<style scoped lang="less"> 
  .hostDetail{
    width: 1000px;
    border-top: 2px solid #BA843A;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    border-right: 1px solid #DDD;
    padding: 30px;
    box-sizing: border-box;
    overflow: hidden;
    margin:100px auto 0;
    .detailTop{
      width: 100%;
      height: 400px;
      .topLeft{
        height: 400px;
        float: left;
        width: 293px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .topRight{
        float: left;
        padding:10px 40px;
      }
    }
  }
  button{
    width: 130px;
    height: 40px;
    font-size: 20px;
    float: left;
    color: #fff;
    background: rgba(211, 165, 63, 1);
    border-radius: 25px;
    margin: 20px;
  }
  .video{
    width: 1000px;
    .title {
        padding-top: 16px;
        height: 22px;
        padding-bottom: 13px;
        border-bottom: 2px solid #BA843A;
        .title_left {
          width: 9px;
          height: 22px;
          background: rgba(194,143,71,1);
          border-radius: 4px;
          float: left;
          line-height: 22px;
        }
        .title_right {
          font-size: 20px;
          color: rgba(194,143,71,1);
          float: left;
          line-height: 22px;
          padding-left: 8px;
        }
    }
  }
  .title {
    padding-top: 16px;
    height: 22px;
    width: 1000px;
    padding-bottom: 13px;
    border-bottom: 2px solid #BA843A;
}
.title_left {
    width: 9px;
    height: 22px;
    background: rgba(194,143,71,1);
    border-radius: 4px;
    float: left;
    line-height: 22px;
}
.title_right {
    font-size: 20px;
    color: rgba(194,143,71,1);
    float: left;
    line-height: 22px;
    padding-left: 8px;
}
.brief_info {
    padding-top: 30px;
    text-align: left;
}

</style>